<template>
  <div class="mine">
    <comHeader :isBack="false" pageTitle="我的"></comHeader>
    
    <vmask v-show="maskShow"></vmask>

    <div class="mine-info">
      <div class="mine-info-account">
        <div class="avatar">
          <img :src="avatarBg" alt="头像">
        </div>
        <div class="phone">
          <p>{{ user.mobile || '未登录' }}</p>
          <strong>{{ user.cumulativeInvest < 50000 ? '新手' : user.cumulativeInvest < 500000 ? 'VIP' : 'SVIP' }}</strong>
          <level :cumulativeInvest="user.cumulativeInvest"></level>
        </div>
        <div class="notice" @click="goMyMessage">
          <span class="icon-notice"></span>
          <div class="notice-red" v-if="isHasMessage"></div>
        </div>
      </div>
      <div class="mine-info-totalmoney" @click="toStatistics">
        <p>资产总额：</p>
        <strong>{{ (user.totalBlance * 100) / 100 || 0 }}</strong>
        <span class="icon-more"></span>
      </div>
      <div class="mine-info-operation">
        <div class="mine-info-operation-left">
          <p>{{ (user.balance * 100) / 100 || 0 }}</p>
          <span>可用余额</span>
        </div>
        <div class="mine-info-operation-right">
          <span @click="goWithDrawals">提现</span>
          <span @click="goRechargeMoney">充值</span>
        </div>
      </div>
    </div>
    <div class="mine-prompt" v-if="user.openAcctStatus === '0'" @click="goAuth()">
      <span class="icon-Notice"></span>
      <p>开通托管账户，确保您的正常使用和资金安全</p>
      <span class="icon-more"></span>
    </div>
    <div class="mine-replace">
      <ul>
        <li @click="toRedCard(1)">
          <span class="icon-red" :style="{color: '#ff9a51'}"></span>
          <p>红包<strong> {{ ~~(user.totalCouponMoney * 100) / 100 || 0 }} </strong><span>元</span></p>
        </li>
        <li class="vertical-1px"></li>
        <li @click="toRedCard(2)">
          <span class="icon-add-interst" :style="{color: '#65befb'}"></span>
          <p>加息劵<strong> {{ user.totalInterestCoupons || 0 }} </strong><span>张</span></p>
        </li>
      </ul>
    </div>
    <spliter :height="10"></spliter>
    <div class="mine-list">
      <ul>
        <li v-for="(text, index) in textList" @click="toitem(text)">
          <span :class="iconMap(index)" :style="{color: colorMap(index)}"></span>
          <p>{{ text }}</p>
          <span class="icon-more"></span>
        </li>
      </ul>
    </div>
    <spliter :height="10"></spliter>
    <div class="mine-loginout" @click="logout">退出登录</div>
    <div class="mine-footer"></div>
    <!-- 银行托管提示页面 -->
    <moneyStore :isrender="moneyStoreShow"></moneyStore>
  </div>
</template>

<script>
  import vmask from 'components/common/mask'
  import comHeader from 'components/common/comHead'
  import spliter from 'components/common/spliter'
  import popUp from 'components/common/popup/popup.js'
  import moneyStore from 'components/moneyStore'
  import level from 'components/level'

  export default {
    data () {
      return {
        isHasMessage: false,
        userAcctKey: null,
        maskShow: false,
        avatarBg: require('../../assets/my_touxiang@2x.png'),
        textList: [
          '资产管理',
          '资金流水',
          '提现记录',
          '充值记录',
          '安全认证',
          '银行卡',
          '邀请好友'
        ]
      }
    },
    computed: {
      user () {
        return this.$store.state.user
      },
      moneyStoreShow () {
        const from = this.$route.query.from
        return from === 'register'
      }
    },
    methods: {
      negtive () {
        this.$router.push('/signup')
      },
      positive () {
        this.$router.push('/login')
      },
      allHide () {
        this.popupShow = false
        this.maskShow = false
      },
      toStatistics () {
        this.$router.push('/statistics')
      },
      toRedCard (tabIndex) {
        this.$router.push(`redCard?tab=${tabIndex}`)
      },
      goAuth () {
        this.toitem(`安全认证1`)
      },
      toitem (text) {
        switch (text) {
          case '资产管理':
            this.$router.push('/assetsManagement')
            break
          case '资金流水':
            this.$router.push('/capitalStream')
            break
          case '提现记录':
            this.$router.push('/presentationRecord')
            break
          case '充值记录':
            this.$router.push('/rechargeRecord')
            break
          case '安全认证1':
            this.$router.push('/certificate')
            break
          case '安全认证':
            this.$router.push('/safety')
            break
          case '银行卡':
            this.$router.push('/bindCard')
            break
          case '邀请好友':
            this.$router.push('/inviteFriends')
            break
          default:
            break
        }
      },
      iconMap (index) {
        if (index === 0) {
          return 'icon-zcgl'
        }
        if (index === 1) {
          return 'icon-capitalstream'
        }
        if (index === 2) {
          return 'icon-Withdrawals'
        }
        if (index === 3) {
          return 'icon-Recharge'
        }
        if (index === 4) {
          return 'icon-Authentication'
        }
        if (index === 5) {
          return 'icon-card'
        }
        if (index === 6) {
          return 'icon-invite'
        }
      },
      colorMap (index) {
        if (index === 0) {
          return '#ff6879'
        }
        if (index === 1) {
          return '#59bdff'
        }
        if (index === 2) {
          return '#d584ff'
        }
        if (index === 3) {
          return '#ffd14a'
        }
        if (index === 4) {
          return '#ff9446'
        }
        if (index === 5) {
          return '#49dcc7'
        }
        if (index === 6) {
          return '#ee55af'
        }
      },
      logout () {
        this.maskShow = true
        document.body.style.overflow = 'hidden'
        const popup = popUp({
          container: '.mine',
          innerHtml: '<p style="text-align: center">是否确认退出？</p>',
          type: 'confirm',
          negtiveText: '取消',
          positiveText: '确定'
        })
        popup.positive = () => {
          this.$cookie.delete('acctKey')
          this.$store.commit('deleteUserInfo')
          popup.close()
          this.$router.go(0) // 返回当前页面
          this.maskShow = false
          document.body.style.overflow = ''
        }
        popup.negtive = () => {
          popup.close()
          this.maskShow = false
          document.body.style.overflow = ''
        }
      },
      goWithDrawals () {
        this.$router.push('/withDrawals')
      },
      goRechargeMoney () {
        this.$router.push('/rechargeMoney')
      },
      goMyMessage () {
        this.$router.push('/myMessage')
      }
    },
    created () {
      this.userAcctKey = this.getUserCookie('acctKey')

      // 如果vuex里面没有user状态，获取值
      if (!this.$store.state.user.registDate) {
        this.$store.dispatch('userInfo', this.userAcctKey)
      }
      if (this.userAcctKey === null || this.userAcctKey === '') {
        this.maskShow = true
        document.body.style.overflow = 'hidden'
      } else {
        document.body.style.overflow = ''
        this.maskShow = false
        this.$store.dispatch('userInfo', this.userAcctKey)
      }
      if (this.userAcctKey === null || this.userAcctKey === '') {
        return
      }
      const vm = this
      this.$http.get(`/api/member/memberMessageList?numPerPage=999&acctKey=${this.userAcctKey}`)
        .then((res) => {
          if (res.data.success) {
            console.log(res.data.data)
            res.data.data.list.forEach((item) => {
              if (item.status === '0') {
                vm.isHasMessage = true
                return
              }
            })
          } else {
            vm.isHasMessage = false
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    destroyed () {
      document.body.style.overflow = ''
    },
    mounted () {
      if (!this.userAcctKey) {
        const popup = popUp({
          container: '.mine',
          innerHtml: '<p style="text-align: center">赚钱机会就在眼前</p><p style="text-align: center">赶快去登录吧</p>',
          type: 'confirm',
          negtiveText: '注册',
          positiveText: '登录'
        })
        popup.positive = () => {
          this.$router.push('/login')
          popup.close()
        }
        popup.negtive = () => {
          this.$router.push('/signup')
          popup.close()
        }
      } else {
        return
      }
    },
    components: {
      vmask,
      comHeader,
      spliter,
      moneyStore,
      level
    }
  }
</script>

<style lang='scss'>
  @import '../../common/scss/tool.scss';
  @import '../../common/scss/_variable.scss';

  .mine {
    font-size: 0; // 去除空文本节点
    color: $base-fff;
    &-info {
      box-sizing: border-box;
      width: 100%;
      padding: 36px 30px 40px 30px;
      background: url('../../assets/my_bg@2x.png') 0 0 no-repeat;
      background-size: cover;
      &-account {
        display: flex;
        align-items: center;
        margin-bottom: 44px;
        .avatar {
          width: 100px;
          height: 100px;
          margin-right: 26px;
          img {
            width: 100px;
            height: 100px;
          }
        }
        .phone {
          color: $base-fff;
          flex: 1 0 auto;
          &>p {
            font-size: 32px;
            margin-bottom: 16px;
          }
          strong {
            font-size: 28px;
            margin-right: 12px;
          }
        }
        .notice {
          position: relative;
          span {
            font-size: 38px;
            color: $base-fff;
          }
          &-red {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-radius: 80px;
            background: $base-ff3131;
          }
        }
      }
      &-totalmoney {
        display: flex;
        font-size: 32px;
        margin-bottom: 40px;
        p {
          flex: 1 0 auto;
        }
        strong {
          font-size: 38px;
          padding-right: 40px;
        }
      }
      &-operation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          p {
            font-size: 48px;
            margin-bottom: 15px;
          }
          span {
            font-size: 32px;
          }
        }
        &-right {
          span {
            display: inline-block;
            width: 136px;
            height: 70px;
            text-align: center;
            line-height: 76px;
            font-size: 32px;
            border-radius: 10px;
            background: $base-fff;
            &:nth-child(1) {
              color: $base-666;
              margin-right: 30px;
            }
            &:nth-child(2) {
              color: $base-ff6c00;
            }
          }
        }
      }
    }
    &-prompt {
      box-sizing: border-box;
      display: flex;
      align-items: center;
      width: 100%;
      height: 100px;
      color: $base-ff6c00;
      font-size: 28px;
      padding: 0 30px;
      background: #feffb6;
      span {
        &:nth-child(1) {
          font-size: 36px;
        }
      }
      p {
        flex: 1 0 auto;
        text-indent: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
      }
    }
    &-replace {
      width: 100%;
      height: 164px;
      ul {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 28px;
        color: $base-666;
        li {
          height: 80px;
          line-height: 80px;
          display: flex;
          align-items: center;
          justify-content: center;
          &>span {
            font-size: 50px;
            margin-right: 18px;
            color: #000;
          }
          &:nth-child(1) {
            width: 50%;
            p {
              strong {
                font-size: 42px;
                color: $base-ff6c00;
              }
              span {
                color: $base-ff6c00;
              }
            }
          }
          &:nth-child(3) {
            width: 50%;
            p {
              strong {
                font-size: 42px;
                color: $base-3fadf9;
              }
              span {
                color: $base-3fadf9;
              }
            }
          }
        }
        li:nth-child(2) {
          @include vertical-1px(#{$base-e5e5e5})
        }
      }
    }
    &-list {
      ul {
        padding: 0 30px;
        li {
          display: flex;
          align-items: center;
          width: 100%;
          height: 110px;
          border-bottom: 1px solid $base-e5e5e5;
          color: $base-333;
          &:last-child {
            border: none;
          }
          p {
            flex: 1 0 auto;
            font-size: 32px;
            margin-left: 30px;
            margin-top: 4px;
          }
          span {
            font-size: 34px;
            color: #000;
          }
          span:nth-child(3) {
            font-size: 30px;
            color: #ddd;
          }
          &:nth-child(7)::after {
            width: 0;
          }
        }
      }
    }
    &-loginout {
      width: 100%;
      height: 110px;
      text-align: center;
      line-height: 120px;
      color: $base-ff6c00;
      font-size: 32px;
    }
    &-footer {
      height: 120px;
      background: $base-f8f8f8;
    }
  }
</style>
